<template>
	<view class="commsg-container">
		<view class="tip">
			请设置企业或机构标识，组织内用户登录时，需输入该标识！
		</view>
		<view class="co-msg">
			<view class="mark">
				<text>企业标识</text>
				<input type="text" v-model="mark" placeholder="           请输入企业标识" />
			</view>
			<view class="items">
				<uni-collapse>
					<uni-collapse-item title="参展信息" class="item" :showAnimation="true" :accordion="true" @resize>

						<!-- 参展类型  -->
						<view class="qimc">
							<text>参展商</text>
							<view class="dwxz">
								<view class="pl" @click="setdw">{{dwxz}}</view>
							</view>
						</view>

						<!-- 详细地址 -->
						<view class="xxdz">
							<view class="dzt">所属承办机构</view>
							<view class="dpl" v-if="!abol" @click="setad">{{adress}}</view>
							<textarea v-else="abol" @input="setapl">{{adress}}</textarea>
						</view>

						<!-- 参展目的 -->
						<view class="xxdz  czmd">
							<view class="dzt">参展目的</view>
							<checkbox-group @change="checkboxChange">
								<label class="uni-list-cell uni-list-cell-pd" v-for="item in items" :key="item.value">
									<view>{{item.name}}</view>
									<view>
										<checkbox :value="item.value" :checked="item.checked" />
									</view>
								</label>
							</checkbox-group>
						</view>

						<!-- 参展内容 -->
						<view class="xxdz">
							<view class="dzt">参展内容</view>
							<view class="dpl" v-if="!abol" @click="setad">{{adress}}</view>
							<textarea v-else="abol" @input="setapl">{{adress}}</textarea>
						</view>

					</uni-collapse-item>
					<!--  -->
					<uni-collapse-item title="企业信息" class="item" :showAnimation="true" :accordion="true" @resize>
						<view>
							<u-form ref="uForm" class="uf">
								<!-- 企业名称 -->
								<view class="qimc">
									<text>企业名称</text>
									<view class="">
										<view class="pl" v-if="!ubol" @click="setUser">{{upl}}</view>
										<input type="text" v-model="user" v-else="ubol" @blur="setUpl" />
									</view>
								</view>
								<!-- 单位性质 -->
								<view class="qimc">
									<text>单位性质</text>
									<view class="dwxz">
										<view class="pl" @click="setdw">{{dwxz}}</view>
									</view>
								</view>
								<!-- 所属行业 -->
								<view class="qimc">
									<text>所属行业</text>
									<view class="dwxz">
										<view class="pl" @click="sethy">{{hyxz}}</view>
									</view>
								</view>
								<!-- 资本选择-->
								<view class="qimc">
									<text>注册资本</text>
									<view class="dwxz">
										<view class="pl" @click="setzb">{{zbxz}}</view>
									</view>
								</view>
								<!-- 详细地址 -->
								<view class="xxdz">
									<view class="dzt">详细地址</view>
									<view class="dpl" v-if="!abol" @click="setad">{{adress}}</view>
									<textarea v-else="abol" @input="setapl">{{adress}}</textarea>

								</view>

								<!-- 注册地-->
								<view class="qimc">
									<text>公司注册地</text>
									<view class="zcdz">
										<view class="pl" @click="setzcd">{{zcdxz}}</view>
									</view>
								</view>

								<!-- 联系电话 -->
								<view class="qimc">
									<text>企业联系电话</text>
									<view class="">
										<view class="pl" v-if="!lbol" @click="setlser">请输入联系电话</view>
										<input type="text" v-model="lxdh" v-else="lbol" @blur="setlpl" />
									</view>
								</view>

								<!-- 网址 传真 单位简介 -->
								<view class="qimc">
									<text>公司网址</text>
									<view class="">
										<view class="pl" v-if="!wbol" @click="setWser">{{wpl}}</view>
										<input type="text" v-model="wser" v-else="wbol" @blur="setWpl" />
									</view>
								</view>

								<view class="qimc">
									<text>传真</text>
									<view class="">
										<view class="pl" v-if="!cbol" @click="setCser">{{cpl}}</view>
										<input type="text" v-model="cser" v-else="cbol" @blur="setCpl" />
									</view>
								</view>

								<!-- 详细地址 -->
								<view class="xxdz">
									<view class="dzt">公司简介</view>
									<view class="dpl" v-if="!ibol" @click="setid">{{idress}}</view>
									<textarea v-else="ibol" @input="setipl">{{idress}}</textarea>

								</view>
								

							</u-form>
						</view>
					</uni-collapse-item>
				</uni-collapse>


			</view>
		</view>
		<button class="btn">
			立即注册
		</button>
	</view>
</template>

<script>
	import vvSelect from '@/components/vv-select/vv-select'
	export default {
		components: {
			vvSelect
		},
		data() {
			return {
				mark: '',
				tab: false,
				// 公司名称
				ubol: false,
				user: '',
				upl: '请输入企业名称',
				// 单位性质
				dwxzList: ['民营企业', '国企', '私营企业'],
				dwxz: '请选择',
				// 所属行业
				sshyList: ['制造业', '服务业', '互联网'],
				hyxz: '请选择',
				// 注册资本
				zbList: ['100万以下', '100万~200万', '200万以上'],
				zbxz: '请选择',
				// 公司地址
				abol: false,
				adress: '请输入企业详细地址',
				// 注册地
				zcdList: ['a', 'b', 'c'],
				zcdxz: '请选择',
				//联系电话
				lbol: false,
				lxdh: '',
				wpl: '请输入联系电话',
				// 网址
				wbol: false,
				wser: '',
				wpl: '请输入公司网址',
				// 传真
				cbol: false,
				cser: '',
				cpl: '请输入公司传真',
				// 公司简介
				ibol: false,
				idress: '请输入公司介绍',
				// 参展目的
				title: 'checkbox 复选框',
				items: [{
						value: '1',
						name: '了解产业政策，行业趋势与动态',
						checked: true
					},
					{
						value: '2',
						name: '中国',
						checked: true
					},
					{
						value: '3',
						name: '巴西',
						checked: false
					},
					{
						value: '4',
						name: '日本',
						checked: false
					}
		
				]
			}
		},
		methods: {
			closeDropdown() {
				this.$refs.uDropdown.close();
			},
			// 设置显示企业名称
			setUser() {
				this.ubol = !this.ubol
			},
			setUpl() {
				if (this.user == '') {
					this.ubol = false;
				} else {
					this.upl = this.user

				}

			},
			// 设置地址
			setad() {
				this.abol = !this.abol
			},
			setapl() {
				if (!this.adress) {
					this.abol = false
				}
			},
			setdw() {
				// console.log(in);
				uni.showActionSheet({
					itemList: this.dwxzList,
					success: (res => {

						this.dwxz = this.dwxzList[res.tapIndex]
					})
				})
			},
			// 所属行业
			sethy() {
				// console.log(in);
				uni.showActionSheet({
					itemList: this.sshyList,
					success: (res => {
						this.hyxz = this.sshyList[res.tapIndex]
					})
				})
			},
			// 注册资本
			setzb() {
				// console.log(in);
				uni.showActionSheet({
					itemList: this.zbList,
					success: (res => {
						this.zbxz = this.zbList[res.tapIndex]
					})
				})
			},
			// 注册地址
			setzcd() {
				// console.log(in);
				uni.showActionSheet({
					itemList: this.zcdList,
					success: (res => {
						this.zcxz = this.zcdList[res.tapIndex]
					})
				})
			},
			// 设置联系dianhua 
			setlser() {
				this.lbol = !this.lbol
			},
			setlpl() {
				if (this.lser == '') {
					this.lbol = false;
				} else {
					this.lpl = this.lser

				}
			},
			// 设置网址
			setWser() {
				this.wbol = !this.wbol
			},
			setWpl() {
				if (this.wser == '') {
					this.wbol = false;
				} else {
					this.wpl = this.wser

				}

			},
			// 设置传真
			setCser() {
				this.cbol = !this.cbol
			},
			setCpl() {

				if (this.cser == '') {
					this.cbol = false;
				} else {
					this.cpl = this.cser

				}

			},
			// 设置简介
			setid() {
				this.ibol = !this.ibol
			},
			setipl() {
				if (!this.idress) {
					this.ibol = false
				}
			},

		}
	}
</script>

<style scoped>
	.tip {
		margin: 20rpx auto 66rpx;
		font-size: 22rpx;
		color: #fa7500;
		text-align: center;
	}

	.co-msg {}

	.mark {
		margin: 30rpx 60rpx;
		display: flex;
		height: 40rpx;
		justify-content: space-between;
		align-items: center;
	}

	.mark text {
		font-size: 30rpx;
		color: #999;
		position: relative;
		margin-left: 30rpx;
	}

	.mark text::after {
		position: absolute;
		content: '*';
		left: -20rpx;
		color: #f20d0d;

	}

	.mark input {
		color: #999;
	}

	.items {
		margin: 0 60rpx;
		position: relative;
	}

	.item {
		position: relative;
		margin-top: 40rpx;
	}

	.item::after {
		position: absolute;
		content: '';
		width: 10rpx;
		height: 50rpx;
		background-color: #2267ec;
		top: 25rpx;
		left: 0;
	}

	.btn {
		position: relative;
		z-index: -1;
		margin: 300rpx auto 0;
		width: 690rpx;
		border-radius: 50rpx;
		background: linear-gradient(90deg, #4d89ff, #3369ff);
		color: #fff;
	}

	.qimc {
		margin-top: 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 80rpx;

	}

	.qimc text {
		position: relative;
		margin-left: 10rpx;
	}

	.qimc text::after {
		content: '*';
		position: absolute;
		color: red;
		left: -10rpx;
		top: -10rpx;

	}

	.pl,
	.qimc input {
		color: #999;
	}

	.xxdz {
		position: relative;
		margin-top: 30rpx;
		margin-left: 5rpx;
		height: 100px;
	}

	.xxdz::after {
		content: '*';
		position: absolute;
		color: red;
		left: -5rpx;
		top: -10rpx;
	}

	.dzt {
		height: 100rpx;
		right: 0;
	}

	.dpl {
		position: absolute;
		right: 0;
		top: 5rpx;
		color: #999;
	}
	.czmd{
		height: 420rpx;
		}
	.uni-list-cell-pd{
		display: flex;
		width: 100%;
		justify-content: space-between;
		height: 90rpx;
	}
</style>
